<template>
    <ul class="boxs flex items-center gap-[20px] flex-wrap px-[30px] pt-[30px]">
        <li @click="()=>{ routerPath('list',{message:'message'}) }" v-for="(item,index) in list" :key="index" :style="{background:`url(${item.img}) no-repeat`,'background-size':'100% 100%'}" class="w-[48%] h-[148px] relative flex items-center">
            <span class="text-[34px] text-[#FFF] whitespace-pre-wrap pl-[20px]" v-html="item.name"></span>
        </li>
    </ul>
</template>

<script setup>
    import { routerPath } from '../router';
    import l1 from '@img/l_1.png';
    import l2 from '@img/l_2.png';
    import l3 from '@img/l_3.png';
    import l4 from '@img/l_4.png';
    import l5 from '@img/l_5.png';
    import l6 from '@img/l_6.png';
    import l7 from '@img/l_7.png';
    import l8 from '@img/l_8.png';
    import l9 from '@img/l_9.png';
    import l10 from '@img/l_10.png';
    import l11 from '@img/l_11.png';

    const list = [
      {name:'政策法规\n体制改革',img:l1},
      {name:'医政医管\n药物',img:l2},
      {name:'基层卫生\n科教宣传',img:l3},
      {name:'疾病预防\n应急管理',img:l4},
      {name:'中医药',img:l5},
      {name:'人口家庭\n妇幼健康',img:l6},
      {name:'规划信息化\n医养健康',img:l7},
      {name:'综合监管',img:l8},
      {name:'人事党务',img:l9},
      {name:'财务审计',img:l10},
      {name:'其他分类',img:l11},
    ]
</script>